<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import NavBar from '@/components/NavBar.vue'
import axios from 'axios'

const userStore = useUserStore()
const router = useRouter()
const showLoginDialog = ref(false)
const currentSlide = ref(0)
const slides = ref([
  {
    title: '智能备课助手',
    description: '基于AI技术，为您提供全方位的教学辅助解决方案',
    image: 'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'
  },
  {
    title: '智能教学设计',
    description: '自动生成教案、PPT和教学资源，让备课更轻松',
    image: 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'
  },
  {
    title: '智能习题生成',
    description: '基于知识点自动生成习题，支持难度分级与个性化推荐',
    image: 'https://images.unsplash.com/photo-1503676260728-1c00da094a0b?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'
  },
  {
    title: '智能学情分析',
    description: '智能分析学生学习情况，提供个性化教学建议',
    image: 'https://images.unsplash.com/photo-1523050854058-8df90110c9f1?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'
  },
  {
    title: '精准数据呈现',
    description: '深度分析教学数据，可视化教学成果，助力教学决策',
    image: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80'
  }
])

let slideInterval

const changeSlide = (direction) => {
  currentSlide.value = (currentSlide.value + direction + slides.value.length) % slides.value.length
}

const jumpToSlide = (index) => {
  currentSlide.value = index
}

const startSlideShow = () => {
  slideInterval = setInterval(() => {
    changeSlide(1)
  }, 5000)
}

const stopSlideShow = () => {
  clearInterval(slideInterval)
}

// 添加滚动到特性部分的方法
const scrollToFeatures = () => {
  const featuresElement = document.querySelector('.features-section')
  if (featuresElement) {
    featuresElement.scrollIntoView({ behavior: 'smooth' })
  }
}

onMounted(() => {
  startSlideShow()
  // 每3秒随机切换一次颜色，与浮动动画同步
  setInterval(changeColors, 3000)
  const rememberedUsername = localStorage.getItem('rememberedUsername')
  const rememberedPassword = localStorage.getItem('rememberedPassword')
  if (rememberedUsername && rememberedPassword) {
    loginForm.value.username = rememberedUsername
    loginForm.value.password = rememberedPassword
    loginForm.value.remember = true
  }
})

onUnmounted(() => {
  stopSlideShow()
})

// const handleLoginSuccess = () => {
//   showLoginDialog.value = false
//   ElMessage.success('登录成功')
//   router.push('/dashboard')
// }
const handleLoginSuccess = () => {
  showLoginDialog.value = false
}

const handleLogout = async () => {
  try {
    await userStore.logout()
    ElMessage.success('退出成功')
    router.push('/')
  } catch (error) {
    console.error('退出失败:', error)
  }
}

// 添加浮动文字数据
const floatingTexts = ref([
  {
    content: '享受大模型的智能辅助',
    left: 15,
    top: 20
  },
  {
    content: '指引AI进行教学设计和学情分析',
    left: 75,
    top: 30
  },
  {
    content: '在这里，你将站上巨人的肩膀',
    left: 25,
    top: 70
  },
  {
    content: '借AI之眼，看教学之景',
    left: 65,
    top: 80
  }
])

// 修改颜色数组，只保留蓝色系
const textColors = [
  '#1a73e8', // 主蓝色
  '#1557b0', // 深蓝色
  '#0f3b7d', // 更深的蓝色
  '#0a1f4a', // 最深的蓝色
  '#1976d2', // 另一种蓝色
  '#2196f3', // 亮蓝色
  '#42a5f5', // 浅蓝色
  '#64b5f6'  // 更浅的蓝色
]

// 添加当前颜色索引的响应式变量
const currentColorIndices = ref(floatingTexts.value.map(() => 0))

// 添加颜色切换函数
const changeColors = () => {
  currentColorIndices.value = currentColorIndices.value.map(() => 
    Math.floor(Math.random() * textColors.length)
  )
}

// 添加新的响应式变量
const activeTab = ref('login')
const countdown = ref(0)
const loginForm = ref({
  username: '',
  password: '',
  remember: false,
  usernameError: '',
  passwordError: ''
})
const registerForm = ref({
  phone: '',
  code: '',
  password: '',
  confirmPassword: '',
  phoneError: '',
  codeError: '',
  passwordError: '',
  confirmPasswordError: ''
})

// 添加忘记密码对话框控制变量
const showResetDialog = ref(false)
const resetForm = ref({
  phone: '',
  code: '',
  newPassword: '',
  confirmPassword: '',
  phoneError: '',
  codeError: '',
  passwordError: '',
  confirmPasswordError: ''
})

// 添加检查手机号是否已注册的函数
const checkPhoneExists = async (phone) => {
  try {
    const response = await axios.get(`/api/user/check-phone?phone=${phone}`)
    return response.data.exists
  } catch (error) {
    console.error('检查手机号失败:', error)
    return false
  }
}

// 添加手机号输入防抖
const phoneCheckTimeout = ref(null)
const handlePhoneInput = async (phone) => {
  if (phoneCheckTimeout.value) {
    clearTimeout(phoneCheckTimeout.value)
  }
  
  if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
    registerForm.value.phoneError = '请输入正确的手机号'
    return
  }

  phoneCheckTimeout.value = setTimeout(async () => {
    const exists = await checkPhoneExists(phone)
    if (exists) {
      registerForm.value.phoneError = '该手机号已被注册'
    } else {
      registerForm.value.phoneError = ''
    }
  }, 500)
}

// 发送验证码
const sendVerificationCode = async () => {
  if (!registerForm.value.phone || !/^1[3-9]\d{9}$/.test(registerForm.value.phone)) {
    registerForm.value.phoneError = '请输入正确的手机号'
    return
  }
  
  try {
    // TODO: 调用发送验证码API
    countdown.value = 60
    const timer = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer)
      }
    }, 1000)
  } catch (error) {
    console.error('发送验证码失败:', error)
  }
}

// 修改注册处理函数
const handleRegister = async () => {
  // 重置错误信息
  registerForm.value.phoneError = ''
  registerForm.value.codeError = ''
  registerForm.value.passwordError = ''
  registerForm.value.confirmPasswordError = ''

  // 表单验证
  if (!registerForm.value.phone || !/^1[3-9]\d{9}$/.test(registerForm.value.phone)) {
    registerForm.value.phoneError = '请输入正确的手机号'
    return
  }

  // 检查手机号是否已注册
  const exists = await checkPhoneExists(registerForm.value.phone)
  if (exists) {
    registerForm.value.phoneError = '该手机号已被注册'
    return
  }

  if (!registerForm.value.code || !/^\d{6}$/.test(registerForm.value.code)) {
    registerForm.value.codeError = '请输入6位数字验证码'
    return
  }
  if (!registerForm.value.password || registerForm.value.password.length < 6) {
    registerForm.value.passwordError = '密码长度不能少于6位'
    return
  }
  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    registerForm.value.confirmPasswordError = '两次输入的密码不一致'
    return
  }

  try {
    // TODO: 调用注册API
    ElMessage.success('注册成功')
    activeTab.value = 'login'
    // 清空表单
    registerForm.value = {
      phone: '',
      code: '',
      password: '',
      confirmPassword: '',
      phoneError: '',
      codeError: '',
      passwordError: '',
      confirmPasswordError: ''
    }
  } catch (error) {
    console.error('注册失败:', error)
    ElMessage.error('注册失败，请重试')
  }
}

// 处理登录
const handleLogin = async () => {
  // 重置错误信息
  loginForm.value.usernameError = ''
  loginForm.value.passwordError = ''

  // 表单验证
  if (!loginForm.value.username) {
    loginForm.value.usernameError = '请输入用户名/手机号'
    return
  }
  if (!loginForm.value.password) {
    loginForm.value.passwordError = '请输入密码'
    return
  }

  try {
    // TODO: 调用登录API
    if (loginForm.value.remember) {
      localStorage.setItem('rememberedUsername', loginForm.value.username)
      localStorage.setItem('rememberedPassword', loginForm.value.password)
    } else {
      localStorage.removeItem('rememberedUsername')
      localStorage.removeItem('rememberedPassword')
    }
    ElMessage.success('登录成功')
    showLoginDialog.value = false
    router.push('/')
  } catch (error) {
    console.error('登录失败:', error)
    ElMessage.error('登录失败，请重试')
  }
}

// 处理忘记密码
const handleResetPassword = async () => {
  // 重置错误信息
  resetForm.value.phoneError = ''
  resetForm.value.codeError = ''
  resetForm.value.passwordError = ''
  resetForm.value.confirmPasswordError = ''

  // 表单验证
  if (!resetForm.value.phone || !/^1[3-9]\d{9}$/.test(resetForm.value.phone)) {
    resetForm.value.phoneError = '请输入正确的手机号'
    return
  }
  if (!resetForm.value.code || !/^\d{6}$/.test(resetForm.value.code)) {
    resetForm.value.codeError = '请输入6位数字验证码'
    return
  }
  if (!resetForm.value.newPassword || resetForm.value.newPassword.length < 6) {
    resetForm.value.passwordError = '密码长度不能少于6位'
    return
  }
  if (resetForm.value.newPassword !== resetForm.value.confirmPassword) {
    resetForm.value.confirmPasswordError = '两次输入的密码不一致'
    return
  }

  try {
    // TODO: 调用重置密码API
    ElMessage.success('密码重置成功')
    showResetDialog.value = false
    showLoginDialog.value = true
    // 清空表单
    resetForm.value = {
      phone: '',
      code: '',
      newPassword: '',
      confirmPassword: '',
      phoneError: '',
      codeError: '',
      passwordError: '',
      confirmPasswordError: ''
    }
  } catch (error) {
    console.error('密码重置失败:', error)
    ElMessage.error('密码重置失败，请重试')
  }
}
</script>

<template>
  <div class="home-container">
    <!-- 导航栏 -->
    <!-- <el-menu mode="horizontal" class="nav-menu" :default-active="activeIndex">
      <el-menu-item index="1" @click="$router.push('/')" class="nav-item">首页</el-menu-item>
       -->
      <!-- 教学设计 -->
      <!-- <el-sub-menu index="2" class="nav-item">
        <template #title>教学设计</template>
        <el-menu-item index="2-1" @click="$router.push('/design/new')">新的设计</el-menu-item>
        <el-menu-item index="2-2" @click="$router.push('/design/history')">历史设计</el-menu-item>
      </el-sub-menu> -->

      <!-- 智能学情 -->
      <!-- <el-sub-menu index="4" class="nav-item">
        <template #title>智能学情</template>
        <el-menu-item index="4-1" @click="$router.push('/analysis/form')">学情表单</el-menu-item>
        <el-menu-item index="4-2" @click="$router.push('/analysis/path')">推荐路线</el-menu-item>
        <el-menu-item index="4-3" @click="$router.push('/analysis/alert')">异常预警</el-menu-item>
      </el-sub-menu> -->

      <!-- 习题生成 -->
      <!-- <el-sub-menu index="5" class="nav-item">
        <template #title>习题生成</template>
        <el-menu-item index="5-1" @click="$router.push('/exercise/homework')">课后习题</el-menu-item>
        <el-menu-item index="5-2" @click="$router.push('/exercise/custom')">习题定制</el-menu-item>
      </el-sub-menu> -->

      <!-- <div class="flex-grow" />
      <template v-if="!userStore.token">
        <el-menu-item index="6" @click="showLoginDialog = true" class="auth-item">登录/注册</el-menu-item>
      </template>
      <template v-else>
        <el-menu-item index="8" @click="$router.push('/dashboard')" class="auth-item">控制台</el-menu-item>
        <el-menu-item index="9" @click="handleLogout" class="auth-item">退出</el-menu-item>
      </template>
    </el-menu> -->

    <NavBar />

    <!-- 主要内容区域 -->
    <div class="main-content">
      <template v-if="$route.path === '/'">
        <!-- 轮播系统 -->
        <div class="carousel-container">
          <div class="carousel">
            <div v-for="(slide, index) in slides" 
                 :key="index"
                 class="slide"
                 :class="{ active: currentSlide === index }"
                 :style="{
                   backgroundImage: `linear-gradient(rgba(26, 115, 232, 0.8), rgba(77, 144, 254, 0.8)), url('${slide.image}')`
                 }">
              <div class="slide-content">
                <h2>{{ slide.title }}</h2>
                <p>{{ slide.description }}</p>
              </div>
            </div>
            <div class="carousel-controls">
              <button class="carousel-btn" @click="changeSlide(-1)">«</button>
              <button class="carousel-btn" @click="changeSlide(1)">»</button>
            </div>
            <div class="indicators">
              <span v-for="(_, index) in slides" 
                    :key="index"
                    class="indicator"
                    :class="{ active: currentSlide === index }"
                    @click="jumpToSlide(index)">
              </span>
            </div>
          </div>
          
          <!-- 浮动文字项 -->
          <div class="floating-items">
            <div v-for="(text, index) in floatingTexts" 
                 :key="index"
                 class="floating-item"
                 :style="{
                   left: text.left + '%',
                   top: text.top + '%',
                   animationDelay: index * 0.5 + 's',
                   color: textColors[currentColorIndices[index]]
                 }">
              {{ text.content }}
            </div>
          </div>
        </div>

        <div class="hero-section">
          <h1>欢迎来到<span class="highlight">云课匠</span></h1>
          <p class="hero-description">智能AI助教，让教学更高效、更智能、更有成效</p>
          <div class="hero-buttons">
            <el-button 
              type="primary" 
              size="large" 
              round 
              class="hero-button"
              @click="$router.push('/login')"
            >
              立即开始
            </el-button>
            <el-button 
              size="large" 
              round 
              class="hero-button outlined-button"
              @click="scrollToFeatures"
            >
              了解更多
            </el-button>
          </div>
        </div>
        
        <!-- 添加特色内容模块 -->
        <div class="features-section">
          <h2 class="section-title">我们的特色</h2>
          <div class="features-container">
            <div class="feature-item">
              <div class="feature-icon">
                <i class="el-icon-magic-stick"></i>
                <span class="icon-text">🧠</span>
              </div>
              <h3>AI驱动</h3>
              <p>利用前沿AI大模型技术，智能化教学设计，提升教学效率</p>
            </div>
            <div class="feature-item">
              <div class="feature-icon">
                <i class="el-icon-data-line"></i>
                <span class="icon-text">📊</span>
              </div>
              <h3>数据分析</h3>
              <p>智能分析学情数据，精准把握学生知识掌握情况</p>
            </div>
            <div class="feature-item">
              <div class="feature-icon">
                <i class="el-icon-connection"></i>
                <span class="icon-text">🔄</span>
              </div>
              <h3>全流程支持</h3>
              <p>从备课、授课到课后评估，提供教学全流程智能辅助</p>
            </div>
          </div>
        </div>
        
        <!-- 功能预览卡片 -->
        <div class="preview-section">
          <h2 class="section-title">功能预览</h2>
          <div class="preview-container">
            <div class="preview-card" @click="$router.push('/design/new')">
              <div class="preview-img">
                <img src="https://img.icons8.com/color/96/000000/training.png" alt="教学设计" />
              </div>
              <div class="preview-content">
                <h3>智能教学设计</h3>
                <p>一键生成教案、课件和教学资源，减轻备课负担</p>
                <el-button type="primary" size="small">立即体验</el-button>
              </div>
            </div>
            <div class="preview-card" @click="$router.push('/homework/generator')">
              <div class="preview-img">
                <img src="https://img.icons8.com/color/96/000000/exercise.png" alt="习题生成" />
              </div>
              <div class="preview-content">
                <h3>智能习题生成</h3>
                <p>根据知识点自动生成多样化习题，支持难度分级</p>
                <el-button type="primary" size="small">立即体验</el-button>
              </div>
            </div>
            <div class="preview-card" @click="$router.push('/study/analysis')">
              <div class="preview-img">
                <img src="https://img.icons8.com/color/96/000000/analytics.png" alt="学情分析" />
              </div>
              <div class="preview-content">
                <h3>智能学情分析</h3>
                <p>深度分析学生学习数据，提供个性化教学建议</p>
                <el-button type="primary" size="small">立即体验</el-button>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 用户评价部分 -->
        <div class="testimonials-section">
          <h2 class="section-title">用户评价</h2>
          <div class="testimonials-container">
            <div class="testimonial-card">
              <div class="testimonial-avatar">
                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" />
              </div>
              <div class="testimonial-content">
                <p>"云课匠帮我节省了大量备课时间，让我能更专注于课堂教学和学生互动。"</p>
                <div class="testimonial-author">
                  <strong>李老师</strong>
                  <span>高中数学教师</span>
                </div>
              </div>
            </div>
            <div class="testimonial-card">
              <div class="testimonial-avatar">
                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" />
              </div>
              <div class="testimonial-content">
                <p>"学情分析功能帮助我精准把握每个学生的学习状况，针对性地进行辅导。"</p>
                <div class="testimonial-author">
                  <strong>王老师</strong>
                  <span>初中语文教师</span>
                </div>
              </div>
            </div>
            <div class="testimonial-card">
              <div class="testimonial-avatar">
                <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="用户头像" />
              </div>
              <div class="testimonial-content">
                <p>"AI习题生成功能大大提高了我出题的效率和质量，学生们也很喜欢这些练习。"</p>
                <div class="testimonial-author">
                  <strong>张老师</strong>
                  <span>小学英语教师</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 底部信息 -->
        <footer class="home-footer">
          <div class="footer-content">
            <div class="footer-logo">
              <h3>云课匠</h3>
              <p>AI赋能教育，智慧点亮未来</p>
            </div>
            <div class="footer-links">
              <div class="footer-section">
                <h4>产品</h4>
                <ul>
                  <li><a href="#features">特色功能</a></li>
                  <li><a href="#preview">功能预览</a></li>
                  <li><a href="#testimonials">用户评价</a></li>
                </ul>
              </div>
              <div class="footer-section">
                <h4>资源</h4>
                <ul>
                  <li><a href="#">帮助中心</a></li>
                  <li><a href="#">使用教程</a></li>
                  <li><a href="#">常见问题</a></li>
                </ul>
              </div>
              <div class="footer-section">
                <h4>联系我们</h4>
                <ul>
                  <li><a href="mailto:support@yukejiang.com">support@yukejiang.com</a></li>
                  <li><a href="tel:+8612345678901">400-123-4567</a></li>
                </ul>
              </div>
            </div>
          </div>
          <div class="footer-bottom">
            <p>© 2023 云课匠 All Rights Reserved.</p>
          </div>
        </footer>
      </template>
      
    </div>

    <!-- 登录对话框 -->
    <el-dialog
      v-model="showLoginDialog"
      :title="null"
      width="400px"
      :close-on-click-modal="false"
      class="auth-dialog"
    >
      <!-- 对话框内容 -->
    </el-dialog>
  </div>
</template>

<style scoped>
.home-container {
  min-height: 100vh;
}

.main-content {
  flex: 1;
  padding: 0;
  max-width: 100%;
  margin: 0;
  width: 100%;
}

.welcome-content {
  margin-top: 40px;
  text-align: left;
  padding: 0 20px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

.dashboard-container {
  padding: 20px;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.dashboard-content {
  padding: 20px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

/* 轮播系统样式 */
.carousel-container {
  position: relative;
  width: 100vw;
  height: 600px;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  margin-top: 60px; /* 导航栏高度 */
}

.carousel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin-bottom: 0;
  border-radius: 0;
}

.slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  background-size: cover;
  background-position: center;
}

.slide.active {
  opacity: 1;
}

.slide-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  padding: 20px;
  max-width: 800px;
  width: 90%;
}

.slide-content h2 {
  font-size: 3em;
  margin-bottom: 20px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.slide-content p {
  font-size: 1.5em;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
  line-height: 1.6;
}

.carousel-controls {
  position: absolute;
  top: 50%;
  width: 100%;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  pointer-events: none;
}

.carousel-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 3em;
  cursor: pointer;
  padding: 20px 15px;
  pointer-events: auto;
  transition: all 0.3s ease;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
  font-weight: bold;
  line-height: 1;
}

.carousel-btn:hover {
  color: rgba(255, 255, 255, 0.9);
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}

.indicators {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}

.indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background-color 0.3s;
}

.indicator.active {
  background: white;
}

.floating-items {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.floating-item {
  position: absolute;
  padding: 15px 30px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  font-size: 18px;
  font-weight: 600;
  white-space: nowrap;
  animation: float 3s ease-in-out infinite;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  pointer-events: none;
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  transition: color 3s ease-in-out;
}

.floating-item:nth-child(1),
.floating-item:nth-child(2),
.floating-item:nth-child(3),
.floating-item:nth-child(4) {
  background: rgba(255, 255, 255, 0.9);
}

@keyframes float {
  0% {
    transform: translate(-50%, -50%) translateY(0px);
  }
  50% {
    transform: translate(-50%, -50%) translateY(-10px);
  }
  100% {
    transform: translate(-50%, -50%) translateY(0px);
  }
}

/* 登录注册对话框样式 */
.auth-dialog :deep(.el-dialog__header) {
  display: none;
}

.auth-dialog :deep(.el-dialog__body) {
  padding: 0;
}

.auth-header {
  text-align: center;
  padding: 20px;
  background: linear-gradient(135deg, #1a73e8, #4d90fe);
  color: #ffffff;
  border-radius: 8px 8px 0 0;
}

.auth-header h2 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.tab-container {
  display: flex;
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

.tab {
  flex: 1;
  text-align: center;
  padding: 15px;
  cursor: pointer;
  color: #666;
  transition: all 0.3s ease;
  position: relative;
}

.tab.active {
  color: var(--nav-blue);
  font-weight: 500;
}

.tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 100%;
  height: 2px;
  background-color: var(--nav-blue);
}

.form-container {
  padding: 0 20px 20px;
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
}

.verification-group {
  display: flex;
  gap: 10px;
}

.verification-group .el-input {
  flex: 1;
}

.error-message {
  color: #f56c6c;
  font-size: 12px;
  margin-top: 4px;
}

.submit-btn {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  margin-top: 10px;
}

/* 修改 Element Plus 输入框样式 */
.auth-dialog :deep(.el-input__wrapper) {
  box-shadow: 0 0 0 1px #dcdfe6 inset;
}

.auth-dialog :deep(.el-input__wrapper:hover) {
  box-shadow: 0 0 0 1px var(--nav-blue) inset;
}

.auth-dialog :deep(.el-input__wrapper.is-focus) {
  box-shadow: 0 0 0 1px var(--nav-blue) inset;
}

.form-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.form-options .el-checkbox {
  color: #666;
}

.form-options .el-button--text {
  color: #1a73e8;
  font-size: 14px;
}

.form-options .el-button--text:hover {
  color: #1557b0;
}

.features-section,
.preview-section,
.testimonials-section {
  padding: 60px 20px;
  margin: 0 auto;
}

.features-section {
  background-color: #f5f7fa;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 28px;
  font-weight: 600;
  color: #333;
  position: relative;
  padding-bottom: 15px;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background-color: #1a73e8;
}

.features-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 30px;
}

.feature-item {
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  text-align: center;
  background-color: #fff;
  padding: 30px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateY(-5px);
}

.feature-icon {
  margin-bottom: 20px;
  height: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.icon-text {
  font-size: 36px;
  margin-bottom: 10px;
}

.feature-item h3 {
  font-size: 20px;
  margin-bottom: 15px;
  color: #333;
  font-weight: 600;
}

.feature-item p {
  color: #666;
  line-height: 1.6;
}

.preview-section {
  background-color: #fff;
}

.preview-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
}

.preview-card {
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  background-color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.preview-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.preview-img {
  width: 100%;
  height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f5f7fa;
  overflow: hidden;
}

.preview-img img {
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.preview-content {
  padding: 20px;
}

.preview-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #333;
}

.preview-content p {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
  line-height: 1.5;
}

.testimonials-section {
  background-color: #f5f7fa;
}

.testimonials-container {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 20px;
}

.testimonial-card {
  flex: 1;
  min-width: 280px;
  max-width: 350px;
  background-color: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 20px;
  transition: transform 0.3s ease;
}

.testimonial-card:hover {
  transform: translateY(-5px);
}

.testimonial-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 20px;
  border: 3px solid #1a73e8;
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonial-content {
  text-align: left;
}

.testimonial-content p {
  font-style: italic;
  color: #333;
  line-height: 1.6;
  margin-bottom: 15px;
}

.testimonial-author {
  display: flex;
  flex-direction: column;
  text-align: right;
}

.testimonial-author strong {
  font-weight: 600;
  color: #1a73e8;
}

.testimonial-author span {
  color: #666;
  font-size: 14px;
}

.home-footer {
  padding: 60px 20px 20px;
  background-color: #183b81;
  color: #ffffff;
}

.footer-content {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  max-width: 1200px;
  margin: 0 auto;
  gap: 40px;
}

.footer-logo {
  text-align: left;
}

.footer-logo h3 {
  margin-bottom: 10px;
  font-size: 24px;
  font-weight: 600;
}

.footer-logo p {
  margin: 0;
}

.footer-links {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.footer-section {
  text-align: left;
}

.footer-section h4 {
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: 600;
}

.footer-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-section ul li {
  margin-bottom: 5px;
}

.footer-section ul li a {
  color: #ffffff;
  text-decoration: none;
}

.footer-section ul li a:hover {
  text-decoration: underline;
}

.footer-bottom {
  text-align: center;
  padding: 20px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-bottom p {
  margin: 0;
}

@media (max-width: 768px) {
  .preview-container,
  .features-container,
  .testimonials-container {
    flex-direction: column;
  }
  
  .preview-card,
  .feature-item,
  .testimonial-card {
    max-width: 100%;
    margin-bottom: 20px;
  }
}

.hero-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #f5f7fa;
  border-radius: 0 0 40px 40px;
}

.hero-section h1 {
  font-size: 36px;
  margin-bottom: 20px;
  color: #333;
}

.highlight {
  color: #1a73e8;
  font-weight: 700;
  position: relative;
}

.highlight::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 8px;
  background-color: rgba(26, 115, 232, 0.2);
  z-index: -1;
}

.hero-description {
  font-size: 18px;
  color: #666;
  margin-bottom: 40px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.hero-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.hero-buttons .el-button {
  padding: 12px 24px;
}

@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 28px;
  }
  
  .hero-description {
    font-size: 16px;
  }
  
  .hero-buttons {
    flex-direction: column;
    align-items: center;
  }
  
  .hero-buttons .el-button {
    width: 80%;
    margin-bottom: 10px;
  }
}
</style>